<template>
	<view>
		<view class="project_item_cp" @click="go_object_jd(itemData)">
			<view class="top">
				{{itemData.title}}
			</view>
			<view class="flexContainer" @click.stop>
				<!-- <u-tag :text="itemData.companyLeader"  mode="light" type="primary"/>
				<u-tag :text="itemData.company"  mode="light" type="primary"/>
				<u-tag :text="itemData.state | getState"></u-tag>
				<u-tag :text="itemData.state == 101 ? '已超时' : itemData.state==100 ? '已结束' : '进行中'" mode="light" :type="itemData.state == 101 ? 'error' : itemData.state==100 ? 'success' : 'primary'"/>
				<u-tag :text="itemData.investTotal + '万元'"></u-tag>
				<u-tag
					v-if="itemData.industry"
					:text="itemData.industry">
				</u-tag> -->
				<u-tag 
					class="u-tag"
					text="项目概括" mode="light" type="primary" @click="onShowModal(0)"/>
				<u-tag 
					class="u-tag"
					text="投资情况" mode="light" type="primary" @click="onShowModal(1)"/>
				<u-tag 
					class="u-tag"
					text="进度情况" mode="light" type="primary" @click="onShowModal(2)"/>
				<u-tag 
					class="u-tag"
					text="主要问题" mode="light" type="primary" @click="onShowModal(3)"/>
				<u-tag 
					class="u-tag"
					text="责任人及单位" mode="light" type="primary" @click="onShowModal(4)"/>
				<!-- <u-tag
					class="u-tag"
					text="拆迁情况" mode="light" type="primary" 
					@click="toUpdateCq(itemData)"/> -->
			</view>
			<view class="progessContainer">
				<view>
					<view>年度投资完成进度</view>
					<u-line-progress
						class="u-line-progress"
						active-color="#2cabff" :percent="itemData.other.yearRatio > 100 ? 100 : itemData.other.yearRatio" height="35">
					</u-line-progress>
				</view>
				
				<view>
					<view>总体投资完成进度</view>
					<u-line-progress 
						class="u-line-progress"
						active-color="#7badc2" :percent="itemData.other.ratio > 100 ? 100 : itemData.other.ratio" height="35">
					</u-line-progress>
				</view>				
			</view>
			<view class="bottom">
				<view v-if="itemData.expectStartTime">
					{{itemData.expectStartTime}}
				</view>	
				<view v-if="itemData.expectEndTime">
					{{itemData.expectEndTime}}
				</view>
			</view>
			<u-button 
				class="u-button"
				@click="openModal(itemData)">
				投资进度
			</u-button>
		</view>
		<u-modal v-model="modalShow" title="投资进度填写" :show-cancel-button='true' @confirm='confirmLeader'>
			<view class="modalContainer">
				<u-picker mode="time" v-model="endShow" :params="params" @confirm="ensureEndTime"></u-picker>
				<u-button 
					class="u-button"
					@click="getEndTime" :hair-line="false" :custom-style="{
					position: 'relative',
					backgroundColor:'#f2f3f5',
					borderRadius: '5px',
					padding:'5px 10px',
					margin: '0',
					border:'0px solid #ffffff',
				}">
					{{invest.investTime ? invest.investTime : '请选择日期'}}
					<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
				</u-button>
				<u-input
					class="u-input"
					:border='true' 
					v-model='invest.investMoney' 
					:custom-style="{
						margin:'0 31px'
					}"
					placeholder="请输入金额"></u-input>
			</view>
		</u-modal>
		<u-modal 
			v-model="modalShowList[0]"
			title="项目概述" 
			@confirm='onHidenModal(0)'>
			<view class="modal2_container">
				<view class="item">
					<span>建设规模及主要内容：</span>
					{{projectInfo[0].content || ''}}
				</view>
				<view class="item">
					<span>建设周期：</span>
					{{projectInfo[0].cycle || ''}}
				</view>
			</view>
		</u-modal>
		<u-modal
			v-model="modalShowList[1]" 
			title="投资情况" 
			@confirm='onHidenModal(1)'>
			<view class="modal2_container">
				<view class="item">
					<span>计划总投资（A）：</span>
					{{projectInfo[1].lastYearInvest || ''}}
				</view>
				<view class="item">
					<span>今年计划投资：</span>
					{{projectInfo[1].thisYearPlanInvest || ''}}
				</view>
				<view class="item">
					<span>今年完成投资：</span>
					{{projectInfo[1].thisYearInvest || ''}}
				</view>
				<view class="item">
					<span>累计完成投资：</span>
					{{projectInfo[1].allmoney || ''}}
				</view>
				<view class="item">
					<span>本月完成投资：</span>
					{{projectInfo[1].thisMonthMoney || ''}}
				</view>
				<view class="item">
					<span>项目财评价（万元）：</span>
					{{projectInfo[1].upmoney || ''}}
				</view>
			</view>
		</u-modal>
		<u-modal
			v-model="modalShowList[2]" 
			title="进度情况" 
			@confirm='onHidenModal(2)'>
			<view class="modal2_container">
				<view class="item">
					<span>年月：</span>
					{{projectInfo[2].input0 || ''}}
				</view>
				<view class="item">
					<span>计划进度：</span>
					{{projectInfo[2].input1 || ''}}
				</view>
				<view class="item">
					<span>实际进度：</span>
					{{projectInfo[2].input2 || ''}}
				</view>
			</view>
		</u-modal>
		<u-modal
			v-model="modalShowList[3]" 
			title="主要问题" 
			@confirm='onHidenModal(3)'>
			<view class="modal2_container">
				<view 
					class="item"
					v-for="(item,index) in projectInfo[3].quest"
					:key="idnex">
					<span>问题：</span>
					{{item.remark || ''}}
				</view>
			</view>
		</u-modal>
		<u-modal
			v-model="modalShowList[4]" 
			title="责任人及单位" 
			@confirm='onHidenModal(4)'>
			<view class="modal2_container">
				<view class="item">
					<span>主管部门：</span>
					{{projectInfo[4].company || ''}}
				</view>
				<view class="item">
					<span>分管区领导：</span>
					{{projectInfo[4].companyLeader || ''}}
				</view>
				<view class="item">
					<span>项目业主单位负责人：</span>
					{{projectInfo[4].principal || ''}}
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
//公共的项目item组件
import {getProjectInfo} from "@/common/Api";
export default{
	name:"PojectItemCp",
	props:{
		itemData:{  //item数据
			type:Object,
			default:()=>{
				return {};
			},
		},
	},
	data(){
		return{
			statePercent:0,
			params: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
			invest:{
				investMoney: '',
				investTime: '',
				projectId: '',
			},
			endShow:false,
			modalShow:false,
			modalShowList:[false,false,false,false,false],
			projectInfo:{
				0:{},
				1:{},
				2:{},
				3:{},
				4:{},
			},
		}
	},
	filters:{
		getState(data){
			const state ={
				0: '前期工作',
				1: '实施阶段',
				2: '竣工阶段',
				3: '结算阶段',
				4: '移交阶段',
				5: '效益评估',
				100:'已完成',
			}
			return state[data]
		}
	},
	methods:{
		toUpdateCq(value){  //跳转到拆迁情况页面
			uni.navigateTo({
			    url: `/pages/updateCq/index?projectId=${value.id}`,
			});
		},
		onShowModal(index){
			this.$set(this.modalShowList,index,true);
			this.getProjectInfo(index);
		},
		onHidenModal(index){
			this.$set(this.modalShowList,index,false);
		},
		getProjectInfo(index){  //获取详情数据
			let params = {};
			params.id = this.itemData.id;
			params.type = index + 1;
			getProjectInfo(params).then(res=>{
				this.projectInfo[index] = res.data.data;
			});
		},
		go_object_jd(value){ //跳转到项目进度页面
			uni.navigateTo({
			    url: `/pages/project_jd_lc/project_jd_lc?item=${JSON.stringify(value)}`,
			});
		},
		openModal(val){
			this.modalShow = true
			this.invest.projectId = val.id
		},
		getEndTime(val) {			
			this.endShow = true			
		},
		ensureEndTime(data){
			this.invest.investTime = data.year + '-' + data.month + '-' + '01'
		},
		confirmLeader(){
			this.invest.investMoney = +this.invest.investMoney
			this.$ajax({
				url:'/wx/project/invest',
				method:'POST',
				data:this.invest,
				success:(res) =>{
					if(res.data.state !== 200){
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
						})
					}else{
						this.invest = {
							investMoney: '',
							investTime: '',
							projectId: '',
						},
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
						})
						this.itemData.other.yearRatio = res.data.data.other.yearRatio;
						this.itemData.other.ratio = res.data.data.other.ratio;
					}
				}
			})
		},
		// getRatio(val){
		// 	console.log('678')
		// 	if(val.investTotal == 0){
		// 		return 100
		// 	}
		// 	if(val.investedTotal && val.investTotal){
		// 		let ratio = val.investedTotal / val.investTotal > 1 ? 1 : val.investedTotal / val.investTotal
		// 		return (ratio * 100).toFixed(2)
		// 	}
		// 	return 0
		// },
		// getYearRatio(val){
		// 	console.log(val)
		// 	if(val.annualInvest && val.expectAnnualInvest){
		// 		let date = new Date().getFullYear() + '年'
		// 		let nowMoney = JSON.parse(val.annualInvest)[date]
		// 		let yeayMoney = JSON.parse(val.expectAnnualInvest)[date]
		// 		if(yeayMoney == 0){
		// 			return 100
		// 		}
		// 		if(nowMoney && yeayMoney){
		// 			let ratio = nowMoney / yeayMoney > 1 ? 1 : nowMoney / yeayMoney
		// 			return (ratio * 100).toFixed(2)
		// 		}
		// 	}
		// 	return 0
		// },
	},
}
</script>

<style lang="scss" scoped>
.noData{
	position: absolute;	
}
.project_item_cp{
	width: 100%;
	background-color: #ffffff;
	height:fit-content;
	@include flex_layout_column;
	align-items: stretch;
	padding: 10px 15px 10px 15px;
	border-bottom: 1px solid #e4e9ea;
	box-sizing: border-box;
	.top{
		font-size: 14px;
		line-height: 20px;
		color: #323232;
		font-weight: bold;
		margin-bottom: 5px;
		.u-tag{
			margin-left: 5px;
		}
	}
	.bottom{
		width: 100%;
		@include flex_layout_row;
		justify-content: space-between;
		align-items: flex-end;
		font-size: 12px;
		color: #757575;
		margin-bottom: 10px;
	}
	>.u-button{
		width: 100%;
	}
}
.flexContainer{
	/deep/ .u-tag{
		display: inline-block;
		margin-right: 10px;		
		margin-top: 10px;
	}
}
.progessContainer{
	margin: 10px 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 5px;
	>view{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		>view{
			margin-right: 5px;
		}
		.u-line-progress{
			flex: 1.8;
			/deep/ .u-progress{
				vertical-align: middle;
			}
		}
	}
}
.modalContainer{
	margin-top: 5px;
	padding: 15px;
	>/deep/ .u-input{
		>view{
			margin-top:10px;
		}
	}
}
.modal2_container{
	max-height: 60vh;
	overflow: auto;
	padding: 15px;
	box-sizing: border-box;
	display: grid;
	grid-gap: 5px;
	>.item{
		span{
			font-weight: bold;
		}
	}
}
</style>
